<template>
	<view class="body margin-xl" @touchstart.prevent="goTouchstart(item.numId)"
		@touchend.prevent="goTouchend(item.numId,2)">
		<view class="charts-box">
			<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData"
			 :loadingType="3" :errorShow="false" :ontouch="true"/>
		</view>
	</view>

</template>

<script>
	export default {
		props: ["item", "foot"],
		watch: {
			item(n, o) {
				this.number = this.item
				this.init()
			}
		},
		created() {
			this.number = this.item
			this.init()
		},
		data() {
			return {
				number: {
					numName: null,
					unit: null,
					value: null,
				},
				opts: null,
				chartData: {
					"categories": [{
							"value": 0.2,
							"color": "#1890ff"
						},
						{
							"value": 0.4,
							"color": "#6ec250"
						},
						{
							"value": 0.6,
							"color": "#89ac3e"
						},
						{
							"value": 0.8,
							"color": "#c2952b"
						},
						{
							"value": 1,
							"color": "#f04864"
						}
					]}
			}
		},
		methods: {
			init() {
				this.opts = {
					"canvasId": this.number.numId,
					"canvas2d":true,
					"subtitle": {
						"name": this.number.numName == null ? '名称' : this.number.numName,
						offsetY: 8
					},
					"title": {
						"name": (this.number.value + this.number.unit)|| 'value',
						"fontSize": 10,
					},
					extra: {
						gauge: {
							"type": "default",
							"width": 8,
							"labelColor": "#666666",
							"splitLine": {
								"fixRadius": 0,
								"splitNumber": 5,
								"width": 8,
								"color": "#FFFFFF",
								"childNumber": 10,
								"childWidth": 12,
							},
							"startNumber": 0,
							"endNumber": this.number.value < 100 ? 100 : this.number.value || 100,
							"pointer": {
								"width": 8,
							},
							"labelFormat": ""
						}
					}
				}
				this.chartData.series = [{
						name: this.number.numName,
						data: this.number.value < 100 ? (this.number.value / 100) : (this.number.value / this.number.value)
					}]
			},
			// 按键长按
			goTouchstart(numId) {
				let _this = this;
				clearTimeout(_this.timeOutEvent);
				_this.timeOutEvent = setTimeout(function() {
					_this.timeOutEvent = 0;
					//  处理长按事件...
					_this.$emit('go-touchstart', numId)
				}, 600);
			},
			// 按钮单击
			goTouchend(numId, type) {
				if (this.foot == null) {
					return;
				}
				if (!this.foot) {

				}
				if (this.foot) {
					uni.navigateTo({
						url: '../components/infi-comp?type=' + type + "&id=" + numId
					})
				}
			},
		}
	}
</script>

<style>
	.body {
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
	}

	.charts-box {
		width: 8rem;
		height: 8rem;
		padding: 1rpx;
		border-radius: 50%;
	}
</style>
